<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>读者未还图书</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <jsp:include page="/web/WEB-INF/common/header.jsp" flush="true"/>

  <div style="padding: 20px;"></div>
  <!-- 搜索条件表单 -->
  <div class="demoTable layui-form">
    <div class="layui-inline">
      <input class="layui-input" name="bookName" id="bookName" autocomplete="off" placeholder="请输入书名">
    </div>
    <div class="layui-inline">
      <div class="layui-input-block">
        <select name="state" id="state">
          <option value="">请选择归还状态</option>
          <option value="2">未还</option>
          <option value="1">已还</option>
        </select>
      </div>
    </div>
    <button class="layui-btn" data-type="reload" lay-filter="reset">搜索</button>
  </div>


</div>


<table class="layui-hide" id="demo" lay-filter="test"></table>

<div class="layui-tab-item layui-show">
  <div id="pageDemo"></div>
</div>

<script type="text/html" id="barDemo">
  {{#  if(d.state =="2"){ }}
  <p style="color:limegreen;font-size:1.3em;">未还</p>
  {{#  } }}
  {{#  if(d.state =="1"){ }}
  <p style="color:red;font-size:1.3em;">已还</p>
  {{#  } }}
</script>
<div id="testDiv"></div>

</body>

<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['layer', 'form', 'table', 'element', 'jquery'], function () {
		let layer = layui.layer;
		let table = layui.table;
		let $ = layui.jquery;
		let form = layui.form;
		let element = layui.element;

		// 导航栏初始化
		element.init();

		// table实例
		table.render({
			elem: '#demo',
			height: 550,
			url: '${pageContext.request.contextPath}/lend/lendList',
			title: '图书表',
			method: 'POST',
			dataType: 'json',
			page: true,
			limit: 5,
			limits: [5, 10, 15, 20],
			parseData: function (res) {
				return {
					'code': res.code,
					'data': res.data.data,
					'msg': res.message,
					'count': res.count
				}
			},
			cols: [
				// 表头实例
				[
					{type: 'checkbox', fixed: 'left'}
					, {field: 'readerId', title: '借阅号', width: 150, sort: true}
					, {field: 'bookId', title: '图书ID', width: 100}
					, {field: 'bookName', title: '书名', width: 250}
					, {field: 'lendDate', title: '借阅时间', width: 250, sort: true}
					, {field: 'backDate', title: '最晚归还时间', width: 250}
					, {
					field: 'fine', title: '产生罚款（￥）', width: 200, templet: function (d) {
						return d.fine === "0.0" ? '' : '<a style="font-size:1.5em;color: red;font-weight: bold">' + d.fine + '元</a>';
					}
				}
					, {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
				]
			],
			// 检索结果重载
			id: 'lendCondition'
		})

    // 检索条件table重载
    let active = {
	    reload: function () {
		    let bookName = $('#bookName');
		    let state = $('#state');
		    // 执行重载
		    table.reload('lendCondition', {
			    method: 'POST',
			    page: {
				    curr: 1
			    },
			    where: {
				    bookName: bookName.val(),
				    state: state.val()
			    }
		    })
	    }
    }

		// 条件检索监听
		$('.demoTable .layui-btn').on('click', function () {
			let type = $(this).data('type');
			active[type] ? active[type].call(this) : ''
		})


	})

</script>
</html>
